
<!DOCTYPE html>
<html>
<head>

<title>新增我的测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="renderer" content="webkit">
<link rel="stylesheet" href="/ui2/src/css/layui.css" media="all" />
<link rel="stylesheet" href="/ui2/css/public.css" media="all" />
<link rel="stylesheet" type="text/css" href="/ui/eova/css/eova.css">

<script type="text/javascript" src="/ui/js/jquery.min.js"></script>
<script type="text/javascript" src="/ui/js/json2-min.js"></script>

<script type="text/javascript" src="/ui/js/common.js"></script>
<script type="text/javascript" src="/ui/js/string.js"></script>

<script type="text/javascript" src="/ui2/src/layui.js"></script>
<script type="text/javascript" src="/ui2/js/DataTableExtend.js"></script>

<!-- <script type="text/javascript" src="http://yelog.org/layui-select-multiple/layui/layui.js"></script> -->

<!-- <script type="text/javascript" src="../../ui2/js/dataList.js"></script> -->





<script type="text/javascript"
	src="/plugins/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="/plugins/easyui/locale/easyui-lang-zh_CN.js"></script>



<script type="text/javascript" src="/plugins/format/jsformat.js"></script>

<script type="text/javascript" src="/ui/easy/easy.min.js"></script>
<script type="text/javascript" src="/ui/eova/eova.min.js"></script>
<script type="text/javascript" src="/ui/eova/src/eova.find.js"></script>



<script>
	String.prototype.replaceAll = function(s1, s2) {
		return this.replace(new RegExp(s1, "gm"), s2);
	}
	// 全局JS常量配置
	var IMG = "http://127.0.0.1:8080/file";
	var FILE = "http://127.0.0.1:8080/file";
	var FILE_MAX = "5120";
	var IMG_MAX = "5120";

	//类似 .jpg|.gif|.png|.bmp
	var UPLOAD_IMG_TYPE = ".jpeg|.jpg|.gif|.png|.bmp".replaceAll('\\.', '');
	var UPLOAD_FILE_TYPE = ".jpg|.jepg|.gif|.png|.bmp|.gz|.7z|.rar|.zip|.swf|.mp3|.mp4|.jar|.apk|.ipa|.doc|.docx|.xls|.xlsx|.ppt|.pptx|.pdf|.txt"
			.replaceAll('\\.', '');
	//刷新此页面
	var refresh = function() {
		location.reload();
	};
</script>
<style>
/* 下拉多选样式 需要引用*/
select[multiple]+.layui-form-select dd {
	padding: 0;
}

select[multiple]+.layui-form-select .layui-form-checkbox[lay-skin=primary]
	{
	margin: 0 !important;
	display: block;
	line-height: 36px !important;
	position: relative;
	padding-left: 26px;
}

select[multiple]+.layui-form-select .layui-form-checkbox[lay-skin=primary] span
	{
	line-height: 36px !important;
	float: none;
}

select[multiple]+.layui-form-select .layui-form-checkbox[lay-skin=primary] i
	{
	position: absolute;
	left: 10px;
	top: 0;
	margin-top: 9px;
}

.multiSelect {
	line-height: normal;
	height: auto;
	padding: 4px 10px;
	overflow: hidden;
	min-height: 38px;
	margin-top: -38px;
	left: 0;
	z-index: 99;
	position: relative;
	background: none;
}

.multiSelect a {
	padding: 2px 5px;
	background: #908e8e;
	border-radius: 2px;
	color: #fff;
	display: block;
	line-height: 20px;
	height: 20px;
	margin: 2px 5px 2px 0;
	float: left;
}

.multiSelect a span {
	float: left;
}

.multiSelect a i {
	float: left;
	display: block;
	margin: 2px 0 0 2px;
	border-radius: 2px;
	width: 8px;
	height: 8px;
	background: url(/ui2/images/close.png) no-repeat center;
	background-size: 65%;
	padding: 4px;
}

.multiSelect a i:hover {
	background-color: #545556;
}
</style>
</head>


<form id="addFormdemo2_test" name="addFormdemo2_test" method="post"
	class="layui-form">
	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">

				<div class="layui-card">
					<div class="layui-card-header">组名1</div>
					<div class="layui-card-body layui-row layui-col-space10">


						<label class="layui-form-label" title="姓名[name]"> 姓名：</label>
						<div class="layui-col-md12">
							<input type="text" id="name" name="name" value="" placeholder=""
								lay-verify="length[2~5]" autocomplete="off" class="layui-input">
						</div>






						<label class="layui-form-label" title="备注[remark]"> 备注：</label>
						<div class="layui-col-md12">
							<textarea class="layui-textarea" id="remark" name="remark"
								style="height: 20px;" placeholder="" lay-verify="length[10~]"></textarea>

						</div>






						<label class="layui-form-label" title="喜好1[tag1]"> <span
							style="color: red;">*</span>喜好1：
						</label>
						<div class="layui-col-md12">
							<select id="tag1" name="tag1" lay-filter="tag1"
								url="/widget/comboJson/demo2_test-tag1" lay-verify="required"
								multiple lay-search>
								<option value="">请选择</option>

								<!--         <option value="0">写作</option> -->
								<!--         <option value="1" >阅读</option> -->
								<!--         <option value="2">游戏</option> -->
								<!--         <option value="3">音乐</option> -->
								<!--         <option value="4">旅行</option> -->

							</select>
							<script type="text/javascript">
								// 手动赋值
								$
										.ajax({
											url : '/widget/comboJson/demo2_test-tag1',
											type : 'get',
											success : function(data) {

												var objects = eval(data);
												$(objects)
														.each(
																function(index) {
																	var object = objects[index];
																	var optionStr = "";
																	optionStr += "<option value='" + object.id + "'>"
																			+ object.cn
																			+ "</option>";
																	//alert(optionStr);
																	$("#tag1")
																			.append(
																					optionStr);
																});

												$('select[id="tag1"]').val(
														''.split(','));
												renderForm();
											}
										});
							</script>
						</div>






						<label class="layui-form-label" title="喜好2[tag2]"> <span
							style="color: red;">*</span>喜好2：
						</label>
						<div class="layui-col-md12">
							<select id="tag2" name="tag2" lay-filter="tag2"
								url="/widget/comboJson/demo2_test-tag2" lay-verify="required"
								lay-search>
								<option value="">请选择</option>

								<!--         <option value="0">写作</option> -->
								<!--         <option value="1" >阅读</option> -->
								<!--         <option value="2">游戏</option> -->
								<!--         <option value="3">音乐</option> -->
								<!--         <option value="4">旅行</option> -->

							</select>
							<script type="text/javascript">
								// 手动赋值
								$
										.ajax({
											url : '/widget/comboJson/demo2_test-tag2',
											type : 'get',
											success : function(data) {

												var objects = eval(data);
												$(objects)
														.each(
																function(index) {
																	var object = objects[index];
																	var optionStr = "";
																	optionStr += "<option value='" + object.id + "'>"
																			+ object.cn
																			+ "</option>";
																	//alert(optionStr);
																	$("#tag2")
																			.append(
																					optionStr);
																});

												$('select[id="tag2"]').val(
														''.split(','));
												renderForm();
											}
										});
							</script>
						</div>






						<label class="layui-form-label" title="密码[password]"> <span
							style="color: red;">*</span>密码：
						</label>
						<div class="layui-col-md12">
							<input type="password" id="password" name="password" value=""
								lay-verify="required|length[6~10]" placeholder="请输入密码"
								autocomplete="off" class="layui-input">
						</div>






						<label class="layui-form-label" title="产品[relation_pro]">
							<span style="color: red;">*</span>产品：
						</label>
						<div class="layui-col-md12">

							<div class="layui-input">
								<input type="text" id="relation_pro_show"
									name="relation_pro_show" placeholder="请选择" class="tags-input">
								<input type="hidden" id="relation_pro" name="relation_pro"
									value="" lay-verify="required" title='产品'>
							</div>

							<script type="text/javascript">
								$(function() {

									//如果是只读模式，则事件移除
									//tag移除事件
									$(document)
											.on(
													'click',
													'.relation_pro',
													function(obj) {
														// console.log(obj.target.parentNode);//标准 

														if ($(
																"#relation_pro_show")
																.attr(
																		'readonly') != "readonly")
															removeTag(obj.target);
													});
									//点击事件
									$("#relation_pro_show")
											.click(
													function() {
														if ($(
																"#relation_pro_show")
																.attr(
																		'readonly') != "readonly")
															tagchoice(
																	$('#relation_pro_show'),
																	$('#relation_pro'),
																	'/widget/find?code=demo2_test&field=relation_pro&template=lay',
																	false);
													});

								});
							</script>
						</div>






						<label class="layui-form-label" title="是否有效[status]">
							是否有效：</label>
						<div class="layui-col-md12">
							<input type="checkbox" id="status" name="status"
								lay-skin="switch" lay-text="是|否" checked>
						</div>



					</div>
				</div>
				<div class="layui-card">
					<div class="layui-card-header"></div>
					<div class="layui-card-body layui-row layui-col-space10">


						<label class="layui-form-label" title="头像[avatar]"> <span
							style="color: red;">*</span>头像：
						</label>
						<div class="layui-col-md12">


							<div class="layui-upload">
								<button type="button" class="layui-btn" id="avatar_button"
									name="avatar_button">上传图片</button>
								<div class="layui-upload-list">
									<input type="hidden" id="avatar" name="avatar" value=""
										lay-verify="required" title='头像' /> <img
										class="layui-upload-img" id="avatar_img" src="">
									<p id="avatar_text"></p>
								</div>
							</div>


							<script>
								layui
										.use(
												'upload',
												function() {
													var $ = layui.jquery, upload = layui.upload;

													//普通图片上传
													var uploadInst_avatar = upload
															.render({
																elem : '#avatar_button',
																url : '/upload/img?name=avatar_file&filedir=',
																size : IMG_MAX //限制文件大小，单位 KB
																,
																accept : 'file',
																exts : UPLOAD_IMG_TYPE,
																acceptMime : 'image/*' //（只显示图片文件） 2.2.6 开始新增
																,
																field : 'avatar_file',
																before : function(
																		obj) {
																	//预读本地文件示例，不支持ie8
																	obj
																			.preview(function(
																					index,
																					file,
																					result) {
																				$(
																						'#avatar_img')
																						.attr(
																								'style',
																								'height: 100px;max-width: 360px;');
																				$(
																						'#avatar_img')
																						.attr(
																								'src',
																								result); //图片链接（base64）
																			});
																},
																done : function(
																		res) {
																	//如果上传失败
																	if (res.success == false) {
																		return layer
																				.msg('上传失败');
																	}
																	//上传成功
																	$('#avatar')
																			.attr(
																					'value',
																					res.fileName);
																},
																error : function() {
																	//演示失败状态，并实现重传
																	var demoText = $('#avatar_text');
																	demoText
																			.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini img-reload_avatar">重试</a>');
																	demoText
																			.find(
																					'.img-reload_avatar')
																			.on(
																					'click',
																					function() {
																						uploadInst_avatar
																								.upload();
																					});
																}
															});
												});

								$(function() {
									var $input = $('#avatar');

									var htmlOptions = eval('({})');
									if (htmlOptions.isReadonly) {
										$input.parent().mask();
										return;
									}

									// init input file
									$('.eova-file')
											.each(
													function() {
														var offset = $(this)
																.find(
																		'input[type=text]')
																.offset();
														$(this)
																.find(
																		'input[type=file]')
																.css(
																		{
																			left : offset.left - 1,
																			// top : offset.top-1,
																			width : $(
																					this)
																					.width()
																		});
													});

									// 异步传图(动态绑定事件)
									var myfun = function() {

										var $this_file = $("#avatar_file");
										console.log($this_file.val());
										$input.val($this_file.val());
										var reader = new FileReader();
										var files = $this_file.prop('files');
										reader.readAsDataURL(files[0]);
										reader.onload = function(e) {
											$this_file.parent().find('img')
													.attr('src',
															e.target.result);
										}

										$input.val("Loading...");

										$('#avatar_file')
												.upload(
														{
															action : '/upload/img?name=avatar_file&filedir=',
															name : "avatar_file",
															onsuccess : function(
																	json) {
																$input
																		.val(json.fileName);
															}
														});
									};

									$(document).on("change", "#avatar_file",
											myfun);

								});
							</script>
						</div>






						<label class="layui-form-label" title="附件[file]"> <span
							style="color: red;">*</span>附件：
						</label>
						<div class="layui-col-md12">
							<div class="layui-upload">
								<button type="button" class="layui-btn" id="file_button"
									name="file_button">选择文件</button>
								<div class="layui-upload-list">
									<input type="hidden" id="file" name="file" title='附件'
										lay-verify="required" value="" />
									<p id="file_text"></p>
								</div>
							</div>

							<script>
								// 目前只支持单文件

								layui
										.use(
												'upload',
												function() {
													var $ = layui.jquery, upload = layui.upload;

													//初始

													//普通文件上传
													var uploadInst_file = upload
															.render({
																elem : '#file_button',
																url : '/upload/file?name=file_file&filedir=',
																size : FILE_MAX //限制文件大小，单位 KB
																,
																accept : 'file',
																exts : UPLOAD_FILE_TYPE,
																field : 'file_file',
																before : function(
																		obj) {
																	//预读本地文件示例，不支持ie8
																	obj
																			.preview(function(
																					index,
																					file,
																					result) {
																				var demoText = $('#file_text');
																				demoText
																						.html('<span class="layui-inline layui-upload-choose">'
																								+ file.name
																								+ '</span>');
																			});
																}

																//,multiple: true
																// ,bindAction: '#file_button_begin'
																,
																done : function(
																		res) {
																	//如果文件上传失败
																	if (res.success == false) {
																		$(
																				'#file')
																				.attr(
																						'value',
																						"");
																		return layer
																				.msg('上传失败:'
																						+ res.msg);
																	}
																	//上传成功
																	$('#file')
																			.attr(
																					'value',
																					res.fileName);

																	var demoText = $('#file_text');
																	var fileName = demoText
																			.text();

																	showFile_file(
																			res.fileName,
																			fileName);
																},
																error : function() {
																	//演示失败状态，并实现重传
																	var demoText = $('#file_text');
																	demoText
																			.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini file-reload_file">重试</a>');
																	demoText
																			.find(
																					'.file-reload_file')
																			.on(
																					'click',
																					function() {
																						uploadInst_file
																								.upload();
																					});
																}
															});
												});

								//path 为局部地址如：/upload/aaa.jpg,name=/upload/aaa.jpg或者 aaa.jpg即可
								function showFile_file(path, name) {
									var demoText = $('#file_text');
									var url = 'http://127.0.0.1:8080/file'
											+ '/' + path;

									//文件名需要 ‘/111/a.jpg’=》裁剪成 a.jpg （如果出现的话）
									var index = name.lastIndexOf('/');
									if (index != -1)
										name = name.substring(index + 1);

									demoText
											.html('<a href="'+url+'" target="view_window"><span class="layui-inline layui-upload-choose">'
													+ name + '</span></a>');
								}
							</script>
						</div>





						<!-- 		<div class="layui-form-item"> -->
						<!--                 <div class="layui-input-block"> -->
						<!--                   <button class="layui-btn" lay-submit lay-filter="component-form-element">立即提交</button> -->
						<!--                   <button type="reset" class="layui-btn layui-btn-primary">重置</button> -->
						<!--                 </div> -->
						<!--         </div> -->

					</div>
				</div>
			
			
			
</div>
</div>
</div>
</form>
<script>
	layui.use([ 'form', 'code' ], function() {
		var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
		$ = layui.$;

		// 代码块
		layui.code({
			title : 'html',
			encode : true,
			about : false

		});

		// 手动赋值
		//$('select[name="简化多选+搜索+大小写敏感"]').val(['sing1', 'movie2']);
		form.render();

		//但是，如果你的HTML是动态生成的，自动渲染就会失效
		//因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
		form.on('submit(submit)', function(data) {
			//console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
			//console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
			//console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
			//console.log(syntaxHighlight(data.field));

			//提交数据
			submitNow(data);
			return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		});

	});

	// json 格式化+高亮
	function syntaxHighlight(json) {
		if (typeof json != 'string') {
			json = JSON.stringify(json, undefined, 2);
		}
		json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
		return json
				.replace(
						/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
						function(match) {
							var cls = 'number';
							if (/^"/.test(match)) {
								if (/:$/.test(match)) {
									cls = 'key';
								} else {
									cls = 'string';
								}
							} else if (/true|false/.test(match)) {
								cls = 'boolean';
							} else if (/null/.test(match)) {
								cls = 'null';
							}
							return '<span class="' + cls + '">' + match
									+ '</span>';
						});
	}
</script>


<script type="text/javascript">
	var $form = $('#addFormdemo2_test');
	var submitNow = function(data) {
		$.post('/form/doAdd/demo2_test', $.getFormParasObj($form), function(
				result) {
			if (result.success) {

				var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
				parent.layer.close(index);

				parent.reload('demo2_test_grid');
			} else {
				//alert$.alert($pjq, result.msg);

				//layer.alert("操作失败:"+result.msg);

				layer.alert(result.msg, {
					icon : 2
				});
			}
		}, 'json');
	};

	$(function() {
		// 禁用表单，注销事件，仅供查看
		$(document).ready(function() {
			//$(this).find('input,textarea,select').attr("readonly",true);
			//$(this).find('input,i,div').unbind();
		});
	});
</script>




</html>